import body from "vxe-table/packages/body/src/body";

export class Canvars {
  constructor(canvas1) {
    this.canvas = canvas1
    this.context = this.canvas.getContext("2d")
    this.drawingSurfaceImageData = null
    this.mousedown = {}
    this.rubberbandRect = {};
    //拖动标识变量
    this.dragging = false;
    this.loc = {
      x: 0,
      y: 0
    };
    this.initialization()
    this.mouseDownFun()
    this.mousemoveFun()
    this.mouseupFun()
  }
  windowToCanvas (x, y) {
    //获取canvas元素的边距对象
    let bbox = this.canvas.getBoundingClientRect();
    return {
      x : x - bbox.left*(this.canvas.width/bbox.width),
      y : y - bbox.top*(this.canvas.height/bbox.height)
    };
  }
  saveDrawingSurface () {
    //从上下文中获取绘图表面数据
    this.drawingSurfaceImageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
  }
  //还原当前绘图表面
  restoreDrawingSurface(){
    //将绘图表面数据还原给上下文
    this.context.putImageData(this.drawingSurfaceImageData, 0, 0);
  }
  //橡皮筋相关函数

  //更新橡皮筋矩形+对角线
  //传入参数：坐标对象loc
  updateRubberband(loc){
    this.updateRubberbandRectangle(loc);
    this.drawRubberbandShape(loc);
  }
  //更新橡皮筋矩形
  //传入参数：坐标对象loc
  updateRubberbandRectangle(loc){
    //获得矩形的宽
    this.rubberbandRect.width = Math.abs(this.loc.x - this.mousedown.x);
    //获得矩形的高
    this.rubberbandRect.height = Math.abs(this.loc.y - this.mousedown.y);
    //获得矩形顶点的位置(left,top)
    //如果鼠标按下的点（起点）在当前点的的左侧
    //这里画一下图就懂了
    if(this.loc.x > this.mousedown.x) {
      this.rubberbandRect.left = this.mousedown.x;
    }else{
      this.rubberbandRect.left = this.loc.x;
    }
    if(loc.y > this.mousedown.y) {
      this.rubberbandRect.top = this.mousedown.y;
    }else{
      this.rubberbandRect.top = this.loc.y;
    }
  }
  //绘制橡皮筋矩形的对角线
  //传入参数：坐标对象loc
  drawRubberbandShape (loc) {
    //alert("draw");
    this.context.beginPath();
    this.context.moveTo(this.mousedown.x, this.mousedown.y);
    this.context.strokeStyle = 'red';
    this.context.lineWidth = 2;
    this.context.lineTo(loc.x, loc.y);
    this.context.stroke();
  }
  //事件处理-----------------------------------------------------
  mouseDownFun (type) {
    let that = this
    // if (type === 0) {
      this.canvas.onmousedown = function(e) {
        that.loc = that.windowToCanvas(e.clientX,e.clientY);
        // let a = that.context.isPointInPath(that.loc.x, that.loc.y)
        // console.log(a)
        e.preventDefault();
        that.saveDrawingSurface();
        that.mousedown.x = that.loc.x;
        that.mousedown.y = that.loc.y;
        that.dragging = true;
      }
    // } else {
    //   this.canvas.onmousedown = null
    // }
  }
  mousemoveFun (preFun) {
    let that = this
    // if (!that.canvas.onmousemove) {
      that.canvas.onmousemove = function(e){
        if(that.dragging) {
          if (preFun) preFun(e)
          e.preventDefault();
          that.loc = that.windowToCanvas(e.clientX, e.clientY);
          that.restoreDrawingSurface();
          that.updateRubberband(that.loc);
        }
        if (!document.onmouseup) {
          that.mouseupFun()
        }
        // if (that.context.isPointInPath(e.offsetX, e.offsetY)) {
        //   console.log('鼠标在当前闭合路径内')
        //   console.log(e.offsetX, e.offsetY)
        // }
      }
    // }
  }
  mouseupFun () {
    let that = this
    document.onmouseup = function (e) {
      console.log(that.dragging)
      if(that.dragging) {
        that.loc = that.windowToCanvas(e.clientX, e.clientY);
        that.restoreDrawingSurface();
        that.updateRubberband(that.loc);
        that.dragging = false;
      }
    }
  }
  initialization() {
    this.context.clearRect(0,0, this.canvas.width, this.canvas.height);
  }
}

const initValue = {
  x: null,
  y: null
}
export const mouseDrag = {
  update(el, binding, vnode, oldVnode) {
    if (binding.value.isDrag) {
      if (binding.value.ref) {
        binding.value.ref.onmousemove = function (e) {
          console.log(e.offsetX, e.offsetY)
          if (binding.value.cb) {
            binding.value.cb(el, e.offsetX, e.offsetY)
          }
        }
      }
    } else {
      if (binding.value.ref) {
        binding.value.ref.onmousemove = null
        binding.value.ref.onmouseup = null
      }
    }
  }
}
export const drag = {
  bind(el, binding, vnode, oldVnode) {
    el.onmousedown = (e) => {
      if (e.button !== 0) return
      let isMouseDown = true
      let ismousemove = false
      const disX = e.clientX - el.offsetLeft
      const disY = e.clientY - el.offsetTop
      el.style.userSelect='none'
      document.onmousemove = function (e) {
        if (isMouseDown) {
          ismousemove = true
          let x = e.clientX - disX
          let y = e.clientY - disY
          if (binding.value.cb) {
            binding.value.cb(el, x, y)
          }
        }
      }
      document.onmouseup = function (e) {
        if (isMouseDown) {
          isMouseDown = false
          document.onmousemove = null
          document.onmouseup = null
          if (ismousemove) {
            if (binding.value.downUp) {
              binding.value.downUp(el)
            }
          }
        }
      }
    }
  }
}
export const dragTl = {
  bind(el, binding, vnode, oldVnode) {
    el.onmousedown = (e) => {
      e.stopPropagation()
      let pDom = el.parentNode.parentNode
      if (binding.value.parentNodeFun) {
        pDom = binding.value.parentNodeFun(el)
      }
      console.log(el)
      const disX = e.clientX - pDom.offsetLeft
      const disY = e.clientY - pDom.offsetTop
      let moveX = e.clientX
      let moveY = e.clientY
      let w = pDom.clientWidth
      let h = pDom.clientHeight
      document.body.style.userSelect = 'none'
      // pDom.style.transition = ''
      document.onmousemove = function (e) {
        let moveX1 = e.clientX - moveX
        let moveY1 = e.clientY - moveY
        let x = e.clientX - disX
        let y = e.clientY - disY
        let w1 = Number(w) - Number(moveX1)
        let h1 = Number(h) - Number(moveY1)
        if (binding.value.type === 'tl') {
          pDom.style.left =  `${x}px`
          pDom.style.top =  `${y}px`
          pDom.style.width = `${w1}px`
          pDom.style.height = `${h1}px`
        } else if (binding.value.type === 'tm') {
          pDom.style.top =  `${y}px`
          pDom.style.height = `${h1}px`
        } else if (binding.value.type === 'tr') {
          w1 = Number(w) + Number(moveX1)
          pDom.style.top =  `${y}px`
          pDom.style.width = `${w1}px`
          pDom.style.height = `${h1}px`
        } else if (binding.value.type === 'mr') {
          w1 = Number(w) + Number(moveX1)
          pDom.style.width = `${w1}px`
        } else if (binding.value.type === 'br') {
          let w1 = Number(w) + Number(moveX1)
          let h1 = Number(h) + Number(moveY1)
          pDom.style.width = `${w1}px`
          pDom.style.height = `${h1}px`
        } else if (binding.value.type === 'bm') {
          let h1 = Number(h) + Number(moveY1)
          if (binding.value.callBmFun) {
            h1 = binding.value.callBmFun(h1) || h1
          }
          pDom.style.height = `${h1}px`
        } else if (binding.value.type === 'bl') {
          let h1 = Number(h) + Number(moveY1)
          let w1 = Number(w) - Number(moveX1)
          pDom.style.left =  `${x}px`
          pDom.style.width = `${w1}px`
          pDom.style.height = `${h1}px`
        } else if (binding.value.type === 'ml') {
          let w1 = Number(w) - Number(moveX1)
          pDom.style.left =  `${x}px`
          pDom.style.width = `${w1}px`
        }
        if (binding.value.callFun) {
          binding.value.callFun(pDom.style)
        }
      }
      document.onmouseup = function (e) {
        if (binding.value.callUpFun) {
          binding.value.callUpFun(pDom.style)
        }
        document.body.style.userSelect = ''
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
}